<script setup>
import MoniterItem from "@/components/MoniterItem2.vue";
import * as echarts from "echarts";
import {inject, onMounted} from "vue";

const $axios = inject("$axios");
function backHomeStat(val) {
  $axios.get("person_back_home/backHomeStat", {
    params: {md: val}
  }).then(res=>{
    console.log(res)
    var dom = document.getElementById("foreignChart");
    var myChart = echarts.init(dom, null, {
      renderer: "canvas",
      useDirtyRect: false,
    });

    var option;

    option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: res.data.data.map(item=>item.time),
        axisLine: {
          show: true,
          lineStyle: {
            color: "#3D90E8"
          }
        },
        axisTick: {show: false},
        splitLine: {show: false},
      },
      yAxis: {
        type: 'value',
        name:'单位:人',
        axisLine: {
          show: false,
          lineStyle: {
            color: "#3D90E8"
          }
        },
        axisTick: {show: false},
        splitLine: {
          show: true,
          lineStyle: {
            color: "#3D90E8"
          }
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      series: [
        {
          data: res.data.data.map(item=>item.num),
          type: 'line',
          smooth: true,
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#37FAC6'
              },
              {
                offset: 1,
                color: '#36D5FF'
              }
            ])
          },
        }
      ]
    };

    if (option && typeof option === "object") {
      myChart.setOption(option);
    }

    window.addEventListener("resize", myChart.resize);
  })
}
onMounted(() => {
  backHomeStat('月');

});
</script>

<template>
  <MoniterItem style="height: 100%;" img="3" title="返乡外来人口趋势" month day @timeUnitClicked="backHomeStat">
    <template style="height: 100%;" #content>
      <div style="height: 100%" id="foreignChart"></div>
    </template>
  </MoniterItem>
</template>

<style scoped>

</style>